<!DOCTYPE html>
<html>
<head>
    <title>个人中心</title>
    <link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">
    <link href="../layui/css/layui.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <meta charset="utf-8">
</head>
<body class="page-index">
<div class="container">
    <div class="topbar"></div>
    <div class="banner"></div>
    <div class="navbar">
        <ul>
            <li><a href="../index.html">首页</a></li>
            <li><a href="activity.html">活动中心</a></li>
            <li><a href="new.html">新闻中心</a></li>
            <li><a href="voluntTrain.html">志愿者培训</a></li>
            <li><a href="controll.html">交管员社区</a></li>
            <li><a href="forum.html">论坛</a></li>
            <li class="active"><a href="personal.html">个人中心</a></li>
        </ul>
    </div>
    <div class="contents">
        <!--左侧导航-->
        <div class="personalLeft">
            <div class="logoTx">
                <img src="../img/logoTx.png" class="logoTxImg">
                <div class="personalName">张珊珊</div>
            </div>
            <div class="navigation">
                <ul>
                    <li class="backSty" data-menu="personalData.html">
                        <text class="lineSty"></text>
                        <a href="javascript:;">
                            <i class="layui-icon layui-icon-form navigaIcon"></i> 资料管理
                        </a>
                    </li>
                    <li data-menu="personalActivity.html">
                        <text class="lineSty"></text>
                        <a href="javascript:;">
                            <i class="layui-icon layui-icon-release navigaIcon"></i> 活动管理
                        </a>
                    </li>
                    <li data-menu="personalArticle.html">
                        <text class="lineSty"></text>
                        <a href="javascript:;">
                            <i class="layui-icon layui-icon-template-1 navigaIcon"></i> 文章管理
                        </a>
                    </li>
                    <li data-menu="personalIntegral.html">
                        <text class="lineSty"></text>
                        <a href="javascript:;">
                            <i class="layui-icon layui-icon-diamond navigaIcon"></i> 积分管理
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!--右侧内容-->
        <div class="personalRight">
            <div class="layui-body layui-form">
                <div class="layui-tab mag0" lay-filter="bodyTab" id="top_tabs_box">
                    <div class="layui-tab-content clildFrame">
                        <div class="layui-tab-item layui-show" id="h5SourceShow">
                            <iframe id="iframe" src="personalData.html"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
    <div class="footer">
        <div class="links">
            <ul>
                <li><a href="/">中国组织网</a></li>
                <li><a href="/">中国共青团网</a></li>
                <li><a href="/">中国文明网</a></li>
                <li><a href="/">中国青年志愿者网</a></li>
                <li><a href="/">山东省共青团</a></li>
                <li><a href="/">齐鲁网</a></li>
                <li><a href="/">日照文明网</a></li>
                <li><a href="/">日照共青团</a></li>
                <li><a href="/">日照政务网</a></li>
                <li><a href="/">日照警务网</a></li>
            </ul>
        </div>
        <p class="company">主办：日照市牵手志愿者协会 | 日照市啄木鸟志愿者协会</p>
        <p class="copyright">技术支持：山东书壳儿网络科技有限公司</p>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
<script type="text/javascript" src="../js/TweenMax.min.js"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript">

    (function($){
        "use strict";
        function height() {
            setTimeout(function () {
                var mainheight = $("#iframe").contents().find("#personHeight").height()+50;
                $(".personalRight").css("height",mainheight);
            },500);
        }
        function bind_events(){
            $('.navigation ul li').off("click").on("click",function(){
                $(this).find('text').css("display","block");
                $(this).siblings().find("text").css("display","none");
                var _url = "'"+ $(this).data("menu")+"'";
                $(this).addClass('backSty').siblings().removeClass('backSty');
                var iframe = '<iframe id="iframe" src='+ _url +'></iframe>';
                $('#iframe').remove();
                $('#h5SourceShow').html(iframe);
                height();
            });
        };
        $(function(){
            $(".navigation ul li:first").find("text").css("display","block");
            height();
            bind_events();
        })
    })(jQuery)
</script>
</body>
</html>